<template>
  <div class="min-h-screen bg-white w-full md:w-[1440px] mx-auto">
    <!-- Header -->
    <header class="py-4 border-b">
      <div class="flex justify-center items-center pb-2 md:pb-8">
        <el-button
          class="absolute left-4 top-4 md:hidden"
          @click="drawerVisible = true"
          :icon="Menu"
        />
        <img
          src="@/assets/images/svg/pc-GAK-logo.svg"
          alt="GAK"
          class="w-20 md:w-48 lg:w-auto object-cover object-center"
        />
      </div>

      <nav class="container mx-auto px-4 hidden md:block">
        <ul class="flex flex-col md:flex-row justify-center items-center gap-4">
          <li
            v-for="item in menuList"
            :key="item.name"
            class="w-full md:w-auto"
          >
            <a
              href="#"
              @click.prevent="scrollToSection(item.id)"
              class="block w-full md:w-80 text-center text-gray-600 hover:text-gray-900 text-lg md:text-xl font-sans py-2"
              >{{ item.name }}</a
            >
          </li>
        </ul>
      </nav>
    </header>

    <!-- Mobile Drawer Menu -->
    <el-drawer
      v-model="drawerVisible"
      direction="ltr"
      size="250"
      :with-header="false"
    >
      <div class="p-4">
        <ul class="flex flex-col gap-4">
          <li v-for="item in menuList" :key="item.name" class="w-full">
            <a
              href="#"
              @click="handleMobileMenuClick(item.id)"
              class="block w-full text-left text-gray-600 hover:text-gray-900 text-lg font-sans py-2 border-b border-gray-200"
            >
              {{ item.name }}
            </a>
          </li>
        </ul>
      </div>
    </el-drawer>
    <!-- Hero Section -->
    <section class="relative">
      <el-carousel
        :height="carouselHeight"
        indicator-position=""
        :autoplay="false"
      >
        <el-carousel-item v-for="(item, index) in bannerCatologs1" :key="index">
          <div class="carousel_banner_img relative">
            <img
              :src="item?.img"
              class="w-full object-cover"
              style="height: inherit"
            />
            <div class="absolute inset-0 flex px-4 md:px-0 mt-36">
              <div class="w-full md:w-[1000px] mx-auto md:ml-[100px]">
                <h2
                  class="text-white text-3xl hidden md:block md:text-5xl font-bold leading-normal"
                  style="font-family: YouSheBiaoTiHei"
                >
                  {{ item.activityName }}
                </h2>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
    <p class="text-lg text-center md:text-xl md:hidden" style="color: #333333">
      THE MOST POWERFUL CAR REPAIR PRODUCTS IN LEBANON
    </p>

    <!-- RUPES Section -->
    <section id="rupes" class="py-12 md:py-20">
      <div class="container mx-auto px-4">
        <div class="text-center mb-6 md:mb-16">
          <div class="flex justify-center items-center pb-8">
            <img
              src="@/assets/images/svg/pc-rupes-logo.svg"
              alt="RUPES"
              class="w-48 md:w-auto object-cover object-center"
            />
          </div>
          <p class="text-lg md:text-xl" style="color: #9d9d9d">
            WORK BETTER, FASTER, MORE EFFECTIVELY
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <div
            v-for="(product, index) in rupesProducts"
            :key="index"
            class="text-center"
          >
            <div class="rounded-lg mb-4">
              <img
                :src="product.imgPath"
                :alt="product.detail"
                class="mx-auto h-48 md:h-64 object-contain"
              />
            </div>
            <h3 class="text-lg font-semibold mb-4">
              {{ product.detail }}
            </h3>
            <button
              class="!rounded-button bg-black text-white px-8 py-2 hover:bg-gray-800 whitespace-nowrap"
              @click="handleExplore(product)"
            >
              EXPLORE
            </button>
          </div>
        </div>

        <div class="text-center">
          <button
            class="!rounded-button bg-gray-200 px-8 py-2 hover:bg-gray-300 whitespace-nowrap"
          >
            MORE RUPES PRODUCTS
          </button>
        </div>
      </div>
    </section>

    <section class="py-0 md:py-20">
      <div class="w-full aspect-video">
        <iframe
          class="w-full h-full"
          :src="devilbissVideo"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin"
          allowfullscreen
        ></iframe>
      </div>
    </section>

    <!-- DEVILBISS Section -->
    <section id="devilbiss" class="py-12 md:py-20 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="text-center mb-2 md:mb-16">
          <div class="flex justify-center items-center pb-8">
            <img
              src="@/assets/images/svg/pc-devilbiss-logo.svg"
              alt="GAK"
              class="w-48 md:w-auto object-cover object-center"
            />
          </div>
          <p class="text-lg md:text-xl" style="color: #9d9d9d">
            BEST DESIGN AND MANUFACTURED WITH CUTTING-EDGE TECHNOLOGY
          </p>
        </div>
        <div class="flex justify-center items-center pb-8">
          <img
            src="@/assets/images/pc-devilbiss-banner.jpg"
            alt="GAK"
            class="w-full object-cover object-center"
          />
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <div
            v-for="(product, index) in devilbissProducts"
            :key="index"
            class="text-center"
          >
            <div class="p-8 rounded-lg mb-4">
              <img
                :src="product.imgPath"
                :alt="product.detail"
                class="mx-auto h-48 md:h-64 object-contain"
              />
            </div>
            <h3 class="text-lg font-semibold mb-4">
              {{ product.detail }}
            </h3>
            <button
              class="!rounded-button bg-black text-white px-8 py-2 hover:bg-gray-800 whitespace-nowrap"
              @click="handleExplore(product)"
            >
              EXPLORE
            </button>
          </div>
        </div>

        <div class="text-center">
          <button
            class="!rounded-button bg-gray-200 px-8 py-2 hover:bg-gray-300 whitespace-nowrap"
          >
            VIEW DEVILBISS PRODUCTS
          </button>
        </div>
      </div>
    </section>
    <section class="py-0 md:py-20">
      <div class="w-full aspect-video">
        <iframe
          class="w-full h-full"
          :src="rupesVideo"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin"
          allowfullscreen
        ></iframe>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-12 md:py-20">
      <div class="container mx-auto px-4">
        <div class="max-w-5xl mx-auto">
          <div class="flex flex-col md:flex-row gap-8 md:gap-12">
            <img
              :src="aboutData.img"
              alt="About GAK"
              class="w-full md:w-1/3 rounded-lg"
            />
            <div class="w-full md:w-2/3">
              <h2 class="text-2xl md:text-3xl font-bold mb-6 md:mb-8">
                ABOUT GAK
              </h2>
              <p class="text-gray-600 mb-6">
                {{ aboutData.introduce }}
              </p>
              <div class="space-y-2 mt-12 md:mt-20">
                <p class="flex items-center gap-2">
                  <el-icon><Phone /></el-icon>
                  {{ aboutData.phone }}
                </p>
                <p class="flex items-center gap-2">
                  <el-icon><Message /></el-icon>
                  {{ aboutData.email }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Menu } from "@element-plus/icons-vue";
import homebanner1 from "@/assets/images/banner.jpg";
import product1 from "@/assets/images/pc-rupes-product-1.png";
import product2 from "@/assets/images/pc-rupes-product-2.png";
import product3 from "@/assets/images/pc-rupes-product-3.png";
import devilbiss1 from "@/assets/images/pc-devilbiss-product-1.png";
import devilbiss2 from "@/assets/images/pc-devilbiss-product-2.png";
import devilbiss3 from "@/assets/images/pc-devilbiss-product-3.png";
import { Phone, Message } from "@element-plus/icons-vue";
import { getList } from "@/api/login";

const menuList = ref([
  {
    name: "RUPES",
    id: "rupes",
  },
  {
    name: "DEVILBISS",
    id: "devilbiss",
  },
  {
    name: "ABOUT GAK",
    id: "about",
  },
]);

const bannerCatologs1 = ref([]);
const rupesProducts = ref([]);

const scrollToSection = id => {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

const devilbissProducts = ref([]);

const drawerVisible = ref(false);

const handleMobileMenuClick = id => {
  drawerVisible.value = false;
  // 等待Drawer关闭动画完成后再执行滚动
  setTimeout(() => {
    scrollToSection(id);
  }, 300);
};

const router = useRouter(); // 建议使用 router 而不是 $router 作为变量名

const handleExplore = product => {
  localStorage.setItem("productData", JSON.stringify(product));
  router.push({
    // 使用 router 而不是 $router
    path: "/detail",
  });
};

const carouselHeight = ref("140px");

const updateHeight = () => {
  carouselHeight.value = window.innerWidth >= 768 ? "500px" : "140px";
};

onMounted(() => {
  updateHeight();
  window.addEventListener("resize", updateHeight);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateHeight);
});



// 获取所有数据
const aboutData = ref({});
const rupesVideo = ref('');
const devilbissVideo = ref('');
function getAllData() {
  getList({ page: 1, size: 100 }).then(res => {
    console.log(res.content);
    const content = res.content;
    content.forEach(item => {
      if (item.name === "banner") {
        bannerCatologs1.value = [
          {
            activityName: item.detail,
            img: item.imgPath,
          },
        ];
      }
      if (item.name === "rupesProduct") {
        rupesProducts.value.push(item);
      }
      if (item.name === "devilbissProduct") {
        devilbissProducts.value.push(item);
      }
      if (item.name === "about") {
        try {
          aboutData.value = JSON.parse(item.extrajson);
        } catch (error) {
          console.error("解析 extrajson 失败:", error);
        }
        aboutData.value.img = item.imgPath;

        console.log("aboutData", aboutData.value);
      }
      if (item.name === "rupesVideo") {
        rupesVideo.value = item.extrajson;
      }
      if (item.name === "devilbissVideo") {
        devilbissVideo.value = item.extrajson;
      }
    });
  });
}

getAllData();
</script>

<style scoped>
.container {
  max-width: 100%;
  @screen md {
    max-width: 1440px;
  }
}
</style>
